<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>money 值：{{ money }}</p>
    <p>userInfo 值：{{ userInfo }}</p>
    <p>总价： {{ $store.getters.totalPrice  }}</p>
    <button @click="addCount" class="btn btn-warning">-1</button>
    <button @click="fn" class="btn btn-warning">-1</button>
    <button @click="addCountWithNum(10)" class="btn btn-warning">+10</button>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Right',

  // 用计算属性简化访问
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // money () {
    //   return this.$store.state.money
    // },

    // 下面这句话相当于上面那两段
    ...mapState(['count', 'money', 'userInfo'])
  },

  methods: {
    fn () {
      this.addCount()
    },

    /*
      相当于在这里帮你声明一个叫addCount的方法
      addCount () {

        this.$store.commit('addCount')
      }
    */
    ...mapMutations(['addCount', 'addCountWithNum', 'setUserInfo']),
    ...mapActions(['reqUserInfo'])
  },

  created () {
    // console.log(this.count)

    // 调用actions里的方法 -- 传的10有用，15没用
    // this.$store.dispatch('reqUserInfo', 10, 15)
    // this.$store.dispatch('reqUserInfo', { num1: 10, num2:15 })
    
    this.reqUserInfo({ num1: 10, num2:15 })
  }
}
</script>

<style>
</style>
